<template>
  <div>
    {{ pageNo }} {{ pageSize }} {{ total }}

    <Pagination
      :current-page="pageNo"
      :page-size="pageSize"
      :total="total"
      @size-change="sizeChangeEvent"
      @current-change="currentChangeEvent"
    ></Pagination>
    <el-button type="primary" @click="hehe()">hehe</el-button>

    <el-button type="primary" @click="haha()">haha</el-button>
    <v-chart :options="polar"></v-chart>
  </div>
</template>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 300px;
}
</style>

<script>
import Pagination from '@/components/Pagination'

import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts,
    Pagination
  },
  data() {
    let data = []

    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI
      let r = Math.sin(2 * t) * Math.cos(2 * t)
      data.push([r, i])
    }

    return {
      pageNo: 1,
      pageSize: 10,
      total: 0,
      polar: {
        title: {
          text: '极坐标双数值轴'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data: data
          }
        ],
        animationDuration: 2000
      }
    }
  },
  methods: {
    haha(){
      this.total = 0
      this.pageNo = 1
      this.pageSize = 10
    },
    hehe() {
      this.total = 11
    },
    sizeChangeEvent(pageSize) {
      console.log(pageSize)
      this.pageNo = 1
      this.pageSize = pageSize
    },
    currentChangeEvent(pageNum) {
      console.log(pageNum)
      this.pageNo = pageNum
    }
  }
}
</script>
